// 引入接口
import Base from "../base.js";
import ProjectionHallApi from "../../api/projectionHall.js";
// 引入影院api
import cinemaApi from "../../api/cinemas.js";

export default class extends Base {
    data = {
        curPage: 1, //当前页
        eachPage: 10,  //每页显示条数
        total: 0,  //总条数
        maxPage: 0,  //总页数
        rows: [],  //当前页数据
        cinema: [],

    }
    addDate = {

    }
    render() {
        this.$el.html(`
        <h1 style="margin:20px auto;width:140px;font-weight:bold;">放映厅列表</h1>
        <div>
            <form style="display:flex;margin:auto;width:1028px;" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="padding: 9px 0;">所属影院</label>
                    <div class="layui-input-block">
                        <select name="cinemasIdFind" lay-verify="required" lay-filter="cinema">
                           <option value="">请选择一个电影院</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="padding: 9px 0;">放映厅</label>
                    <div class="layui-input-block">
                        <select name="theaterIdFind" lay-filter="theater"></select>
                    </div>
                </div>
                <div class="layui-form-item" id="status">
                    <label class="layui-form-label" style="padding: 9px 0;">营业状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="true" title="营业中" lay-filter="ChoiceRadio">
                        <input type="radio" name="status" value="false" title="未营业" lay-filter="ChoiceRadio">
                    </div>
                </div>
                <div>
                    <div>   
                        <a id="find-btn" class="layui-btn layui-btn-sm">立即查询</a>
                    </div>
                </div>
            </form>
            <table class="layui-table" lay-size="lg" style="text-align=center;">
                <thead>
                    <tr>
                      <th>序号</th>
                      <th>放映厅名</th>
                      <th>所属影院</th>
                      <th>是否营业</th>
                      <th  width="150">操作</th>
                    </tr>
                </thead>
              <tbody class="projectionHall"></tbody>
            </table>
            <form class="layui-form" width="100" style="font-size:10px;">
                <div class="layui-form-item" style="display:inline-block;width:150px;">
                    <label id="cinemaId" class="layui-form-label">当前页</label>
                    <div class="layui-input-block" style="margin-left: 80px;">
                        <select id="curPage" lay-verify="required"></select>
                    </div>
                </div>
                每页显示条数：<input type="text" name="eachPage" value="${this.data.eachPage}" style="width:25px">
                总条数：<span class="total"></span>
            </form>
            <div style="margin:auto;width:210px;">
                <button id="first-btn" class="layui-btn layui-btn-sm">首页</button>
                <button id="prev-btn" class="layui-btn layui-btn-sm">
                    <i class="layui-icon layui-icon-left layui-font-12"></i>
                </button>
                <button id="next-btn" class="layui-btn layui-btn-sm">
                    <i class="layui-icon layui-icon-right layui-font-12"></i>
                </button>
                <button id="last-btn" class="layui-btn layui-btn-sm">尾页</button>
            </div>
        </div>
        `)
        const form = layui.form;
        form.render();
        // 获取输入框及按钮
        this.$projectionHallEle = $("tbody[class=projectionHall]");
        // 当前页
        this.$curPageEl = $("#curPage");
        // 每页显示条数
        this.$eachPageEl = $("input[name=eachPage]");
        // 总条数
        this.$totalEl = $(".total");
        // 首页按钮
        this.$firstBtn = $("#first-btn");
        // 上一页按钮
        this.$prevBtn = $("#prev-btn");
        // 下一页按钮
        this.$nextBtn = $("#next-btn");
        // 尾页按钮
        this.$lastBtn = $("#last-btn");
        // 获取查询按钮
        this.$findBtn = $("#find-btn");
        // 获取下拉列表
        this.$cinemasIdFind = $("select[name=cinemasIdFind]")
        this.$theaterIdFind = $("select[name=theaterIdFind]")

        $('#find-btn').addClass("layui-btn-disabled").attr("disabled", true);
        console.log(this.$findBtn);
    }

    // 重新渲染 获取数据将数据渲染到页面
    rerender() {
        console.log(this.$cinemasIdFind);
        // 渲染影院
        this.$cinemasIdFind.html(`${this.data.cinema.map(item => {
            return `<option value="${item._id}">${item.name}</option>`
        }).join("")
            }`)
        const form = layui.form;
        form.render()
        // 表格遍历添加字符串
        let str = "";
        this.data.rows.map((item, index) => {
            const rows = item;
            this.data.cinema.map(item => {
                if (rows.cinemasId == item._id) {
                    if (rows.status) {
                        str += `
                <tr value="${index}">
                    <td class="${rows._id}">${index + 1}</td>
                    <td>${rows.name}</td>
                    <td>${item.name}</td>
                    <td class="${item.status}">营业中</td>
                    <td  style="display:flex;">
                       <button name="reset-btn" value="${index}" class="layui-btn  layui-btn-sm layui-bg-gray">更新</button>
                       <button name="del-btn" value="${index}" class="layui-btn layui-btn-sm">删除</button>
                    </td>
                </tr>`
                    } else {
                        str += `
                <tr value="${index}">
                    <td class="${rows._id}">${index + 1}</td>
                    <td>${rows.name}</td>
                    <td>${item.name}</td>
                    <td class="${rows.status}">未营业</td>
                    <td  style="display:flex;">
                       <button name="reset-btn" value="${index}" class="layui-btn  layui-btn-sm layui-bg-gray">更新</button>
                       <button name="del-btn" value="${index}" class="layui-btn layui-btn-sm">删除</button>
                    </td>
                </tr>`
                    }
                }
            })
        }).join("");
        // 将字符串添加到表格内
        this.$projectionHallEle.html(str);
        // 显示总条数
        this.$totalEl.html(this.data.total);
        // 显示当前页
        let options = "";
        // for循环添加option
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `
            <option value="${i}">${i}</option>
            `;
        }
        // 将添加好的options渲染进当前页的下拉列表
        this.$curPageEl.html(options);
        this.$curPageEl.val(this.data.curPage)
        // 获取删除按钮
        this.$delBtn = $("button[name=del-btn]");
        // 删除事件绑定
        this.$delBtn.on("click", this.delBtnHandel.bind(this));
        // 获取更新按钮
        this.$resetBtn = $("button[name=reset-btn]");
        // 更新事件绑定
        this.$resetBtn.on("click", this.resetBtnHandel.bind(this));
        // 获取查询按钮
        this.$findBtn = $("#find-btn");
    }

    // 删除放映厅
    async delBtnHandel(e) {
        const index = e.target.value;
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        await ProjectionHallApi.del(_id);
        layer.msg("删除成功");
        this.getProjectionHall();
    }

    // 修改放映厅信息
    resetBtnHandel(e) {
        const index = e.target.value;
        const _id = $(`tbody>tr:eq(${index})>td:eq(0)`).attr("class");
        const data = { _id }
        Object.assign(this.data, data);
        // 修改地址跳转到上传文件的视图，并在地址后携带需要传到另一个视图的数据
        location.hash = `#/info/reset-projectionHall/${this.data._id}`;
    }


    // 获取放映厅数据
    async getProjectionHall() {
        // 获取影院数据
        const cinemas = await cinemaApi.getData();
        this.data.cinema = cinemas;
        const { curPage, eachPage } = this.data;
        const data = await ProjectionHallApi.projectionHall({ curPage, eachPage });
        Object.assign(this.data, data);
        this.rerender();
    }


    // 获取数据(结构已经初始化完成，有真实的DOM，渲染完成之后触发)
    async mounted() {
        await this.getProjectionHall();
        console.log(this.data.cinema);
        this.rerender();
    }

    // 首页按钮点击事件
    firstBtnHandel() {
        // 判断当前页是否是第一页，如果不是则跳转到第一页
        if (this.data.curPage !== 1) {
            this.data.curPage = 1;
        };
        // 重新渲染
        this.getProjectionHall();
    }

    // 上一页按钮点击事件
    prevBtnHandel() {
        // 判断当前页是否是首页，如果不是则当前页减一
        if (this.data.curPage !== 1) {
            this.data.curPage = this.data.curPage - 1;
        };
        // 重新渲染
        this.getProjectionHall();
    }

    // 下一页按钮点击事件
    nextBtnHandel() {
        // 判断当前页是否是最后一页，如果不是则当前页加一
        if (this.data.curPage !== this.data.maxPage) {
            this.data.curPage = this.data.curPage + 1;
        };
        this.getProjectionHall();
    }

    // 尾页按钮点击事件
    lastBtnHandel() {
        // 判断当前页是否是最后一页，如果不是则跳到最后一页
        if (this.data.curPage !== this.data.maxPage) {
            this.data.curPage = this.data.maxPage;
        };
        // 重新渲染
        this.getProjectionHall();
    }

    // 每页显示条数失焦事件
    eachPageHandel(e) {
        this.data.eachPage = e.target.value;
        this.data.curPage = 1;
        this.getProjectionHall();
    }

    // 当前页表单change事件
    setcurPageHandel(e) {
        this.data.curPage = e.target.value;
        this.getProjectionHall();
    }


    // 电影院select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        // 将this的指向赋值给that
        const that = this;
        // 电影院下拉列表事件监听
        form.on('select(cinema)', async function (e) {
            const cinemasId = e.value;
            // 将获取的电影院id值存入addData对象
            that.addDate["cinemaId"] = cinemasId;
            that.btnAble();
            // 通过电影院id值找到对应放映厅并获取数据
            const data = await ProjectionHallApi.getTheater(cinemasId);
            // 渲染影院
            that.$theaterIdFind.html(`${data.map(item => {
                return `<option value="${item._id}">${item.name}</option>`
            }).join("")
                }`);
            form.render();
            // 电影院下拉列表事件监听
            form.on('select(theater)', async function (e) {
                const _id = e.value;
                that.addDate["_id"] = _id;
            })
        })
    }


    // 单选框监听事件
    radioHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function (data) {
            const status = data.value;
            that.addDate["status"] = status;
            that.btnAble();
        });
    }


    // 查询事件
    async findHandle() {
        const { cinemaId, status, _id } = this.addDate;
        console.log(typeof status);
        console.log({ cinemaId, status, _id });
        this.data.rows = await ProjectionHallApi.find({ cinemaId, status, _id });
        this.rerender()
        return false;
    }

    // 按钮解禁
    btnAble() {
        if (this.addDate) {
            $('#find-btn').removeClass("layui-btn-disabled").attr("disabled", false);
        }
    }

    handle() {
        // 查询事件按钮
        this.$findBtn.on("click", this.findHandle.bind(this))
        // 首页按钮事件绑定
        this.$firstBtn.on("click", this.firstBtnHandel.bind(this));
        // 上一页按钮事件绑定
        this.$prevBtn.on("click", this.prevBtnHandel.bind(this));
        // 下一按钮事件绑定
        this.$nextBtn.on("click", this.nextBtnHandel.bind(this));
        // 尾页按钮事件绑定
        this.$lastBtn.on("click", this.lastBtnHandel.bind(this));
        // 每页显示条数事件绑定
        this.$eachPageEl.on("blur", this.eachPageHandel.bind(this));
        // 当前页下拉列表绑定
        this.$curPageEl.on("change", this.setcurPageHandel.bind(this));
        // 下拉列表改变
        this.changeHandel();
        // 单选框改变
        this.radioHandel();
    }
}